<template>
	<div class="bodyCard_box">
		<h3>{{title}}</h3>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '最新文章'">
			<el-table-column prop="name" label="文章名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="username" label="作者" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="description" label="描述" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="category" label="分类名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="日期" width="180" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '最新评论'">
			<el-table-column prop="name" label="文章名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="con_dis" label="文章评论" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="username" label="评论用户" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="评论日期" width="180" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '用户列表'">
			<el-table-column prop="username" label="名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="userpic" label="头像" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-avatar icon="el-icon-user-solid" :src="scope.row.userpic"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="email" label="邮箱" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="password" label="密码" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="status" label="状态" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" disabled></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="role" label="角色" show-overflow-tooltip>
				<template slot-scope="scope">
					{{scope.row.role == '0' ?'管理员':'普通用户'}}
				</template>
			</el-table-column>
			<el-table-column prop="about" label="关于" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="创建日期" width="180" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-edit" @click="editEvent(scope.row)"
						v-if="userinfo.id != scope.row.id">
					</el-button>
					<el-button type="primary" size="small" icon="el-icon-delete" @click="deleteEvent(scope.row.id)"
						v-if="userinfo.id != scope.row.id">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '文章列表'">
			<el-table-column prop="pic" label="图片" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-avatar shape="square" icon="el-icon-picture" :size="50" fit="contain" :src="scope.row.pic">
					</el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="文章名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="username" label="作者" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="description" label="文章描述" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="category" label="分类名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="create_time" label="创建日期" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
			<el-table-column prop="content" label="文章内容" show-overflow-tooltip>
				<!-- <template slot-scope="scope">
					 <span v-html="scope.row.content"></span>
				</template> -->
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-edit" @click="editEvent(scope.row)">
					</el-button>
					<el-button type="primary" size="small" icon="el-icon-delete" @click="deleteEvent(scope.row.id)">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '分类列表'">
			<el-table-column prop="category" label="分类名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="username" label="创建人" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="status" label="状态" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" disabled></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="create_time" label="创建日期" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-edit" @click="editEvent(scope.row)">
					</el-button>
					<el-button type="primary" size="small" icon="el-icon-delete" @click="deleteEvent(scope.row.id)">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '项目列表'">
			<el-table-column prop="projectname" label="项目名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="username" label="创建人" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="projecturl" label="链接" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="create_time" label="创建日期" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-edit" @click="editEvent(scope.row)">
					</el-button>
					<el-button type="primary" size="small" icon="el-icon-delete" @click="deleteEvent(scope.row.id)">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
			v-if="title == '评论列表'">
			<el-table-column prop="name" label="文章名称" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="con_dis" label="评论内容" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="username" label="评论人" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="create_time" label="创建日期" show-overflow-tooltip>
				<template slot-scope="scope">
					{{parseTimeNew(scope.row.create_time)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" show-overflow-tooltip>
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-edit" @click="editEvent(scope.row)">
					</el-button>
					<el-button type="primary" size="small" icon="el-icon-delete" @click="deleteEvent(scope.row.id)">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination hide-on-single-page layout="prev, pager, next" :page-size="listpage.pagesize"
			:total="listpage.listcount" :current-page="listpage.currentpage" @current-change="currentChange">
		</el-pagination>

		<el-dialog title="编辑" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal="false" @close="dialogVisibleemit">
			<Formvue :title="title" :dialogobj="dialogobj" @dialogVisibleemit="dialogVisibleemit"></Formvue>
		</el-dialog>
	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import Formvue from "./form.vue"
	export default {
		name: "tableList",
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				dialogobj: {},
				listpage: {
					currentpage: 1,
					listcount: 10,
					pagesize: 10
				}
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		components: {
			Formvue
		},
		props: {
			title: {
				type: String,
				require: true //声明是否必须
			}
		},
		created() {
			this.getTableData()
		},
		methods: {
			parseTimeNew(date) {
				var ndate = new Date(date)
				let type = 'yyyy-MM-dd hh:mm:ss'
				const o = {
					'M+': ndate.getMonth() + 1, // 月份
					'd+': ndate.getDate(), // 日
					'h+': ndate.getHours(), // 小时
					'm+': ndate.getMinutes(), // 分
					's+': ndate.getSeconds(), // 秒
					'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
					'S': ndate.getMilliseconds() // 毫秒
				}
				if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1
					.length))
				for (const k in o) {
					if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[
						k]) : (('00' + o[k]).substr(('' + o[k]).length)))
				}
				return type
			},
			async getTableData() {
				if (this.title == '最新文章') {
					let {
						data
					} = await this.$axios.get('/blog/users/userarticlelist?pagesize=10&currentpage=1&sort=desc');
					this.tableData = data.data.List;
				} else if (this.title == '最新评论') {
					let {
						data
					} = await this.$axios.get('/blog/users/userdis?pagesize=10&currentpage=1&sort=desc');
					this.tableData = data.data.List;
				} else if (this.title == '用户列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userinfo?pagesize=9&currentpage=1');
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '文章列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userarticlelist?pagesize=9&currentpage=1&userid=' + (
						this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '分类列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/usercatelist?pagesize=9&currentpage=1&userid=' + (
						this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '项目列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userproject?pagesize=9&currentpage=1&userid=' + (
						this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '评论列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userdis?pagesize=9&currentpage=1&userid=' + (
						this.userinfo.role == 0 ? '' : this.userinfo.id));
					console.log(data);
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				}
			},
			async currentChange(tocurrentpage) {
				if (this.title == '用户列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userinfo?pagesize=9&currentpage=' + tocurrentpage);
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '文章列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userarticlelist?pagesize=9&currentpage=' + tocurrentpage +
						'&userid=' + (
							this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '分类列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/usercatelist?pagesize=9&currentpage=' + tocurrentpage +
						'&userid=' + (
							this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '项目列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userproject?pagesize=9&currentpage=' + tocurrentpage +
						'&userid=' + (
							this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				} else if (this.title == '评论列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/userdis?pagesize=9&currentpage=' + tocurrentpage +
						'&userid=' + (
							this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.tableData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.pagesize = data.data.listpage.pagesize;
					this.listpage.listcount = data.data.listpage.listcount;
				}
			},
			deleteEvent(id) {
				if (this.title == '用户列表') {
					this.$confirm('此操作将删除该账号, 是否继续?', '提示', {
						confirmButtonText: '继续',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						let {
							data
						} = await this.$axios.get('/blog/users/deleteid?id=' + id + '&type=用户');
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getTableData();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (this.title == '文章列表') {
					this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
						confirmButtonText: '继续',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						let {
							data
						} = await this.$axios.get('/blog/users/deleteid?id=' + id + '&type=文章');
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getTableData();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (this.title == '分类列表') {
					this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
						confirmButtonText: '继续',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						let {
							data
						} = await this.$axios.get('/blog/users/deleteid?id=' + id + '&type=分类');
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getTableData();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (this.title == '项目列表') {
					this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
						confirmButtonText: '继续',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						let {
							data
						} = await this.$axios.get('/blog/users/deleteid?id=' + id + '&type=项目');
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getTableData();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else if (this.title == '评论列表') {
					this.$confirm('此操作将删除该评论, 是否继续?', '提示', {
						confirmButtonText: '继续',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						let {
							data
						} = await this.$axios.get('/blog/users/deleteid?id=' + id + '&type=评论');
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getTableData();
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			editEvent(obj) {
				let _obj = JSON.stringify(obj);
				this.dialogobj = JSON.parse(_obj);
				console.log(this.dialogobj);
				this.dialogVisible = true;
			},
			dialogVisibleemit() {
				this.dialogVisible = false;
				this.getTableData();
				this.dialogobj.content = "";
				}
		},
	}
</script>

<style lang="less" scoped>
	.bodyCard {
		height: calc(100% - 193px);
		margin-top: 10px;

		.bodyCard_box {
			width: 49% !important;
			height: 100%;
			display: inline-block;

			h3 {
				text-align: start;
				height: 40px;
			}

			.el-table {
				height: calc(100% - 100px);
			}
		}
	}

	.el-pagination {
		float: right;
	}
</style>
